<script setup lang="ts">
import type { IApp } from '@apps/_share/store/app'
import { MAIN_APP_SLOT_ROUTE_PATH } from '@apps/_share/settings'
import useProjectStore from '@apps/_share/store/project'
import { getRouter } from '@apps/_share/utils'

const {
  projects,
  setProjectCode,
} = useProjectStore()

const router = getRouter()

function toApp({
  projectCode,
  code,
}: IApp) {
  setProjectCode(projectCode, code)
  // location.href = `${location.origin}${MAIN_APP_SLOT_ROUTE_PATH}/${projectCode}/${code}`
  router.push({ path: `${MAIN_APP_SLOT_ROUTE_PATH}/${projectCode}/${code}` })
}

</script>

<template>
  <div class="home">
    <ElCard
      v-for="project in projects"
      :key="project.code"
      class="w-full h-auto"
    >
      <template #header>
        <div class="card-header">
          {{ project.name }}
        </div>
      </template>

      <div class="card-apps">
        <ElCard
          v-for="app in project.children"
          :key="app.code"
          class="cursor-pointer aspect-ratio-square"
          shadow="hover"
          tabindex="0"
          @click="toApp(app)"
          @keyup.enter="toApp(app)"
        >
          <div class="h-full flex items-center justify-center font-400 text-16px">
            {{ app.name }}
          </div>
        </ElCard>
      </div>
    </ElCard>
  </div>
</template>

<style lang="less" scoped>
.home {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  font-size: 24px;
  font-weight: 600;
}

.card-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}

:deep(.el-card__body) {
  block-size: 100%;
}
</style>
